<template>
  <p :class="isActive ? 'active' : ''">123</p>
  <p :class="{ active : isActive }">456</p>
  <p class="item" :class="{ active : isActive }">789</p>
</template>

<script setup>
  import { ref } from 'vue'
  const isActive = ref(true)
</script>

<style scoped>
  .active{
    color: red;
  }
</style>